<template>
  <div v-if="resourceType === 0 || resourceType === 13 " class="flex">
    <div class="w-15 w-15 relative playlist-img mr-2 cursor-pointer">
      <img class="w-15 h-15" :src="resource?.coverImgUrl" alt="">
      <span class="i-mdi-play-circle-outline inline-block play text-2xl" @click="getSongDetailFn(resource?.id)"></span>
    </div>
    <div class="flex flex-col justify-around">
      <p class="m-0">
        <span class="border-1 yu-titleColor inline-block text-xs pl-1 pr-1">歌单</span>
        <span class="ml-2 yu-textColor-hover" @click="jumpPage(resource?.id, 2)">{{ resource?.name }}</span>
      </p>
      <p class="m-0" >
        by <span class="yu-textColor-hover"
                 @click="jumpPage(resource?.creator?.userId, 0)">{{ resource?.creator?.nickname }}</span>
      </p>
    </div>
  </div>
  <div v-if="resourceType === 1"  class="flex">
    <div class="w-15 w-15 relative playlist-img mr-2 cursor-pointer">
      <img class="w-15 h-15" :src="resource?.coverUrl" alt="">
      <span class="i-mdi-play-circle-outline inline-block play text-2xl" @click="getSongDetailFn(resource?.id)"></span>
    </div>
    <div class="flex flex-col justify-around">
      <p class="m-0">
        <span class="border-1 yu-titleColor inline-block text-xs pl-1 pr-1">{{ resource?.radio?.category }}</span>
        <span class="ml-2 yu-textColor-hover" @click="jumpPage(resource?.id, 6)">{{ resource?.name }}</span>
      </p>
      <p class="m-0">
        <span class="yu-textColor-hover"
                 @click="jumpPage(resource?.radio?.id, 3)">{{ resource?.radio?.name }}</span>
      </p>
    </div>
  </div>
  <div v-if="resourceType === 4 || resourceType === 18" class="flex">
    <div class="w-15 w-15 relative playlist-img mr-2 cursor-pointer">
      <img class="w-15 w-15" :src="resource?.album?.picUrl" alt="">
      <span class="i-mdi-play-circle-outline inline-block play text-2xl" @click="getSongDetailFn(resource.id)"></span>
    </div>
    <div class="flex flex-col justify-around  flex-1">
      <p class="m-0">
        <span class="border-1 yu-titleColor inline-block text-xs pl-1 pr-1">歌曲</span>
        <span class="ml-2 yu-textColor-hover" @click="jumpPage(resource?.id, 5)">{{ resource?.name }}</span>
      </p>
      <p class="truncate">
         <span
             class="yu-textColor-hover mr-1"
             v-for="artist in resource?.artists"
             :key="artist.id"
             @click="jumpPage(artist.id, 1)"
         >
          {{ artist.name }}
        </span>
      </p>

    </div>
  </div>
  <div v-if="resourceType === 14" class="flex">
    <div class="w-15 w-15 relative playlist-img mr-2 cursor-pointer">
      <img class="w-15 h-15" :src="resource?.picUrl" alt="">
      <!--      <span class="i-mdi-play-circle-outline inline-block play text-2xl" @click="getSongDetailFn(resource.id)"></span>-->
    </div>
    <div class="flex flex-col justify-around">
      <p class="m-0">
        <span class="border-1 yu-titleColor inline-block text-xs pl-1 pr-1">人文历史</span>
        <span class="ml-2 yu-textColor-hover" @click="jumpPage(resource?.id, 3)">{{ resource?.name }}</span>
      </p>
      <p class="m-0">
        by <span class="yu-textColor-hover" @click="jumpPage(resource?.id, 3)">{{ resource?.dj?.nickname }}</span>
      </p>
    </div>
  </div>
  <div v-if="resourceType === 3" class="flex">
    <div class="w-15 h-15 relative playlist-img mr-2 cursor-pointer">
      <img class="w-15 h-15" :src="resource?.picUrl" alt="">
      <span class="i-mdi-play-circle-outline inline-block play text-2xl" @click="getSongDetailFn(resource.id)"></span>
    </div>
    <div class="flex flex-col justify-around flex-1">
      <p class="m-0">
        <span class="border-1 yu-titleColor inline-block text-xs pl-1 pr-1">专辑</span>
        <span class="ml-2 yu-textColor-hover" @click="jumpPage(resource?.id, 4)">{{ resource?.name }}</span>
      </p>
      <p class="truncate">
        <span
            class="yu-textColor-hover mr-1 inline-block"
            v-for="artist in resource?.artists"
            :key="artist.id"
            @click="jumpPage(artist.id, 1)"
        >
          {{ artist.name }}
        </span>
      </p>

    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()
// 播放歌曲 || 歌单
const getSongDetailFn = (id) => {
  const obj = {
    // 播放单曲
    18: () => {
      store.getSongDetail(id)
    },
    4: () => {
      store.getSongDetail(id)
    },
    // 播放专辑
    3: () => {
      store.getAlbumPlayer(id)
    },
    // 播放歌单
    0: () => {
      store.getPlaylistDetail(id)
    },
    // 播放歌单
    13: () => {
      store.getPlaylistDetail(id)
    },
    // 17, 28都是播放电台节目
    17: () => {
      store.getProgramDetailPlay(id)
    },
    28: () => {
      store.getProgramDetailPlay(id)
    },
    // 播放节目
    1: () => {
      store.getProgramDetailPlay(id)
    }
  }
  obj && obj[props.resourceType] && obj[props.resourceType]()
}
// 用户详情 0
// 跳转到艺术家 1
// 跳转到歌单详情页 2
// 跳转到电台详情 3
// 跳转到专辑详情 4
// 跳转到歌曲详情 5
// 跳转到用户详情
const jumpPage = (id, type) => {
  const typeCol = {
    0: '/user/homepage',
    1: '/artist',
    2: '/play-list-detail',
    3: '/dj-radio',
    4: '/collection-detail',
    5: '/pc-song-detail',
    6: '/radio-program' // 节目
  }
  router.push({
    path: typeCol[type],
    query: {
      id
    }
  })
}

const props = defineProps({
  resourceType: Number, // 用来判断是歌曲还是，歌单
  // 歌单 歌曲数据
  resource: {
    type: Object,
    default: {}
  }
})
</script>

<style scoped lang="scss">
.playlist-img {
  &:hover {
    .play {
      display: inline-block;
    }
  }

  .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }

}
</style>
